<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="搜索"></HeadCustom>
		<view class="wrap">
			<SearchInput :isBtn="false" :keywords.sync="keywords" @input="getSearch()" />			
			<view class="list-history" v-if="step == 0">
				<view class="tit fboxRow Ycenter" v-if="listHistory.length">
					<view class="flex1 font30 lh44 color-E8CDA7">历史搜索</view>
					<view class="color-6B707C font26 lh38"  @click="setHistory('del')">清除历史</view>
				</view>
				<view class="mt16">
					<Tags :isBorder="true" :list="listHistory" @click="tagClick" />
				</view>
			</view>
			<template v-else>
			<view class="tabs-box mt8">
				<u-tabs :list="navList" @change="navChange" :current="navIndex" keyName="label" lineWidth="30" itemStyle="height:88rpx"
					lineColor="#E8CDA7" :activeStyle="{ color: '#E8CDA7', fontWeight: 500, fontSize: '30rpx' }"
					:inactiveStyle="{ color: '#6B707C', fontSize: '30rpx' }">
				</u-tabs>
				<view class="list">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll"
						:style="{height: scrollHeight +'px'}">
						<template v-for="(item, index) in navList">
							<template v-if="item.value != 1 &&(navIndex == 0 || item.value == navList[navIndex].value)">
								<view class="mt24" :class="[navIndex==0 ? 'bg-232732 card border-radius12' : '']" :key="index" v-if="listData[item.key].length">
									<view class="hd fboxRow Ycenter" v-if="navIndex == 0">
										<view class="flex1 font38 color-E8CDA7">{{item.label}}</view>
										<!-- <view class="more fboxRow Ycenter font26 color-6B707C" @click="navChange(item)">查看更多 <u-icon name="arrow-right" color="#6B707C"></u-icon></view> -->
									</view>
									<view class="bd">
										<view v-for="(sub, i) in listData[item.key]" :key="i">
											<template v-if="(navIndex == 0 && i < 2) || item.value == navList[navIndex].value">
												<SearchCompany v-if="item.key==='companyList'" :innerData="sub" />
												<SearchCard v-if="item.key==='cardList'" :innerData="sub" />
												<SearchDynamic v-if="item.key==='dynamicList'" :innerData="sub" />
												<SearchProduct v-if="item.key==='productList'" :innerData="sub" />
											</template>
										</view>
									</view>
									<view class="ft fboxRow Ycenter" @click="navChange(item)">
										<u-icon name="search" size="36rpx" color="#6B707C"></u-icon>
										<view class="flex1 font26 color-6B707C">查看更多{{item.title}}</view>
										<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
									</view>
								</view>
							</template>
						</template>	
					</scroll-view>
				</view>
			</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {searchContacts, searchDynamic, searchCompany, searchProduct} from '@/api/index.js';
	import Tags from '@/pagesApp/recruit/components/tags.vue';
	import SearchInput from '@/components/search/index.vue';
	import SearchCard from './components/search-card.vue';
	import SearchCompany from './components/search-company.vue';
	import SearchDynamic from './components/search-dynamic.vue';
	import SearchProduct from './components/search-product.vue';
	export default {
		components:{
			Tags,
			SearchInput,
			SearchCompany,
			SearchCard,
			SearchDynamic,
			SearchProduct
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				navList:[
					{
						value: 1,
						label: '综合',
						key: '',
					}, {
						value: 2,
						label: '名片',
						key: 'cardList',
					}, {
						value: 4,
						label: '企业',
						key: 'companyList',
					},{
						value: 3,
						label: '点点',
						key: 'dynamicList',
					},{
						value: 5,
						label: '产品',
						key: 'productList',
					}
				],
				navIndex: 0,
				keywords: '',
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: {
					cardList: [],
					dynamicList: [],
					companyList: [],
					productList: []
				},
				key: '',
				listHistory: [],
				scrollTop: 0,
				scrollHeight: 0,
				step: 0,
			}
		},
		onLoad() {
			this.getInit()
		},
		onReady() {
			console.log('onReady');
			uni.createSelectorQuery().selectAll('.head-custom-wrap,.search-box').boundingClientRect(res => {
				console.log(res)
				uni.getSystemInfo({success:(sys)=>{
					let height = sys.screenHeight
					res.filter(item=>{
						height = height-item.height
					})
					this.scrollHeight = height - (getApp().globalData.statusBarHeight/2)
				}})
			}).exec();
		},
		methods: {
			navChange(e){
				this.navIndex = e.index
				this.key = e.key
				// this.listConfig = {
				// 	current: 1,
				// 	size: 20,
				// 	count: 0,
				// 	loading: 'loading'
				// }
				// this.keywords = ''
				// this.listData = {
				// 	cardList: [],
				// 	dynamicList: [],
				// 	companyList: [],
				// 	productList: []
				// }
			},
			getInit(){
				let value = uni.getStorageSync('searchHistory')
				if (typeof(value) != "string") {
					this.listHistory = value
				}
			},
			setKey(val){
				const index = val.includes(this.keywords)
				const indexList = val.split(this.keywords)
				const text = indexList[0]+`<text style="color:#E8CDA7">${this.keywords}</text>`+ (indexList[1] || '')
				return text
			},
			tagClick(e){
				this.keywords = e
				this.keySearch()
			},
			keySearch(){
				if(this.keywords){
					this.getSearch()
				}else{
					this.listConfig = {
						current: 1,
						size: 20,
						count: 0,
						loading: 'loading'
					}
					this.step = 0
					this.listData = []
				}
			},
			delSearch(){
				this.keywords = ''
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				this.step = 0
				this.listData = []
				this.listKey = []
			},
			setHistory(type, key){
				if(type == 'add'){
					if(!this.listHistory.includes(key)){
						if(this.listHistory.length < 10){
							this.listHistory.unshift(key)
						}else{
							this.listHistory.pop()
							this.listHistory.unshift(key)
						}
					}
				}else{
					this.listHistory = []
				}
				uni.setStorageSync('searchHistory',this.listHistory)
			},
			getSearch(){
				this.step = 1
				if(this.keywords){
					this.listData.dynamicList = []
					searchContacts({search: this.keywords}).then(res=>{
						this.listData.cardList = res.data
					})
					searchCompany({companyName: this.keywords}).then(res=>{
						this.listData.companyList = res.data
					})
					searchProduct({productName: this.keywords}).then(res=>{
						this.listData.productList = res.data
					})
					this.getList()
				}else{
					this.listConfig = {
						current: 1,
						size: 20,
						count: 0,
						loading: 'loading'
					}
					this.listData = {
						cardList: [],
						dynamicList: [],
						companyList: [],
						productList: []
					}
				}
			},
			getList(){
				const { current, size, loading} = this.listConfig
				searchDynamic({current, size,isHeatSort: 0, searchKey: this.keywords}).then(res=>{
					if(this.listData.dynamicList.length){
						this.listData.dynamicList = this.listData.dynamicList.concat(res.data.list) 
					}else{
						this.listData.dynamicList = res.data.list
					}
					this.listLoading(res)
				})
			},
			listLoading(res) {
				if (res.data.total == 0) {
					this.listConfig.loading = 'list-not'
				} else if (res.data.total < res.data.size || res.data.current * res.data.size >= res.data.total) {
					this.listConfig.loading = 'nomore'
				}
				this.listConfig.count = res.data.total
			},
			listMore() {
				const {
					current,
					size,
					count,
					loading
				} = this.listConfig
				if (loading == 'nomore') {
					return
				}
				console.log(current * size , count)
				
				if (current * size < count) {
					this.listConfig.current = current + 1
					this.getList()
				} else {
					this.listConfig.loading = 'nomore'
				}
			},
			upper: function(e) {
				console.log('upper',e)
			},
			lower: function(e) {
				console.log('lower',e)
				this.listMore()
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{min-height: calc(100vh);}
	.search-tag{padding: 0 12rpx;}
	.mr12{margin-right: 12rpx;}
	.list-history{padding: 40rpx 40rpx 0;}
	.list-key{padding: 40rpx 40rpx 0;}
	.list-key .item{padding: 16rpx 0;}
	.list-key .tit{margin: 0 8rpx 0 16rpx;}
	.list-key .label{ margin-left: 24rpx; width: 60rpx;height: 36rpx;border-radius: 4rpx;}
	.list{padding: 8rpx 24rpx 0;}
	.card{padding: 12rpx 24rpx 18rpx;}
	.hd{height: 54rpx;}
	.ft{height: 40rpx;}
	.bg-232732{background-color: #232732;}
	.dynamic-item{padding: 30rpx 0;}
	.not-item{padding: 0 0 32rpx 0;}
</style>
